<template>
	<view class="commodityItem" @click="toProductDetail">
	    <image :src="item.img" mode="widthFix"></image>
	    <view class="shop-info">
			<view class="shop-info-msg">
				{{item.msg}}
			</view>
			<view class="shop-info-money">
				<view class="shop-info-money-money">
					￥{{item.price}}
				</view>
				<view class="shop-info-money-icon">
					<vanIcon name="ellipsis" />
				</view>
			</view>
	    </view>
	</view>
</template>

<script>
	import vanIcon from '../../wxcomponents/vant/@vant/icon'
	export default{
		components:{vanIcon},
		props:{
			item:{
				type:Object
			}
		},
		methods:{
			toProductDetail(){
				let id = this.item.id ? this.item.id : 0
				uni.navigateTo({
					url:'/packageA/pages/ProductDetail/ProductDetail?id='+id,
				})
			}
		}
	}
</script>

<style lang='less'>
	.commodityItem{
		box-shadow: #999 .2rem .2rem .6rem;
		margin: .5rem 0;
		overflow: hidden;
		border-radius: 1rem;
		width: 100%;
		box-sizing: border-box;
		image{
			width: 100%;
			margin: 0 auto .5rem;
			display: block;
		}
		background-color: #fff;
		.shop-info{
			box-sizing: border-box;
			padding: .5rem;
			.shop-info-money{
				margin: 0.2rem 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.shop-info-money-money{
					font-size: 1.2rem;
					font-weight: 600;
				}
				
				.shop-info-money-icon{
					margin: 0 1rem;
				}
			}
		}
	}
</style>